<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="在线工具,DES,加密,解密">
<meta name="description" content="在线工具 | DES加密解密">
<meta name="author" content="">
<title>在线工具 | DES加密解密</title>
<!-- Bootstrap core CSS -->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="container">
  <div class="page-header">
    <h1>DES加密解密</h1>
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">明文</label>
        <div class="col-sm-10">
          <textarea name="plaintext" class="form-control" id="plaintext" ></textarea>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">明文编码</label>
        <div class="col-sm-10">
          <div class="radio-list">
            <label>
              <input type="radio" name="plaintext_types" id="optionsRadios1" value="ANSII" checked>
              ANSII </label>
            <label>
              <input type="radio" name="plaintext_types" id="optionsRadios2" value="HEX">
              HEX </label>
            <label>
              <input type="radio" name="plaintext_types" id="optionsRadios3" value="BASE64">
              BASE64 </label>
            <label>
              <input type="radio" name="plaintext_types" id="optionsRadios4" value="URL">
              URL </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密钥</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="key" placeholder="key" value="12345678">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密钥编码</label>
        <div class="col-sm-10">
          <div class="radio-list">
            <label>
              <input type="radio" name="key_types" id="key_types1" value="ANSII" checked>
              ANSII </label>
            <label>
              <input type="radio" name="key_types" id="key_types2" value="HEX" >
              HEX </label>
            <label>
              <input type="radio" name="key_types" id="key_types3" value="BASE64">
              BASE64 </label>
            <label>
              <input type="radio" name="key_types" id="key_types4" value="URL">
              URL </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">密文</label>
        <div class="col-sm-10">
          <textarea name="ciphertext" class="form-control" id="ciphertext" ></textarea>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密文编码</label>
        <div class="col-sm-10">
          <div class="radio-list">
            <label>
              <input type="radio" name="ciphertext_types" id="ciphertext_types1" value="ANSII" >
              ANSII </label>
            <label>
              <input type="radio" name="ciphertext_types" id="ciphertext_types2" value="HEX" checked>
              HEX </label>
            <label>
              <input type="radio" name="ciphertext_types" id="ciphertext_types3" value="BASE64">
              BASE64 </label>
            <label>
              <input type="radio" name="ciphertext_types" id="ciphertext_types4" value="URL">
              URL </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">填充模式</label>
        <div class="col-sm-10">
          <div class="radio-list">
            <label>
              <input type="radio" name="paddings" id="ciphertext_types1" value="Pkcs7" >
              Pkcs7 </label>
            <label>
              <input type="radio" name="paddings" id="ciphertext_types2" value="ZeroPadding" checked>
              ZeroPadding </label>
            <label>
              <input type="radio" name="paddings" id="ciphertext_types3" value="NoPadding" >
              NoPadding </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">字符集</label>
        <div class="col-sm-10">
          <select class="form-control" id="charset">
            <option>UTF-8</option>
            <option>GBK</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default" id="btn_en">加密</button>
          <button type="button" class="btn btn-default" id="btn_de">解密</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- /container --> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 

<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="crypto-js/components/core-min.js"></script> 
<script type="text/javascript" src="crypto-js/rollups/aes.js"></script> 
<script type="text/javascript" src="crypto-js/rollups/tripledes.js"></script> 
<script type="text/javascript" src="crypto-js/rollups/rabbit.js"></script> 
<script type="text/javascript" src="crypto-js/rollups/rc4.js"></script> 
<script type="text/javascript" src="crypto-js/components/mode-ecb.js"></script> 
<script type="text/javascript" src="crypto-js/components/pad-nopadding.js"></script> 
<script type="text/javascript" src="crypto-js/components/pad-zeropadding.js"></script> 
<script language="javascript" type="text/javascript">
//UTF-16转UTF-8
function utf16ToUtf8(s){
	if(!s){
		return;
	}
	
	var i, code, ret = [], len = s.length;
	for(i = 0; i < len; i++){
		code = s.charCodeAt(i);
		if(code > 0x0 && code <= 0x7f){
			//单字节
			//UTF-16 0000 - 007F
			//UTF-8  0xxxxxxx
			ret.push(s.charAt(i));
		}else if(code >= 0x80 && code <= 0x7ff){
			//双字节
			//UTF-16 0080 - 07FF
			//UTF-8  110xxxxx 10xxxxxx
			ret.push(
				//110xxxxx
				String.fromCharCode(0xc0 | ((code >> 6) & 0x1f)),
				//10xxxxxx
				String.fromCharCode(0x80 | (code & 0x3f))
			);
		}else if(code >= 0x800 && code <= 0xffff){
			//三字节
			//UTF-16 0800 - FFFF
			//UTF-8  1110xxxx 10xxxxxx 10xxxxxx
			ret.push(
				//1110xxxx
				String.fromCharCode(0xe0 | ((code >> 12) & 0xf)),
				//10xxxxxx
				String.fromCharCode(0x80 | ((code >> 6) & 0x3f)),
				//10xxxxxx
				String.fromCharCode(0x80 | (code & 0x3f))
			);
		}
	}
	
	return ret.join('');
}
//UTF-8转UTF-16
function utf8ToUtf16(s){
	if(!s){
		return;
	}
	
	var i, codes, bytes, ret = [], len = s.length;
	for(i = 0; i < len; i++){
		codes = [];
		codes.push(s.charCodeAt(i));
		if(((codes[0] >> 7) & 0xff) == 0x0){
			//单字节  0xxxxxxx
			ret.push(s.charAt(i));
		}else if(((codes[0] >> 5) & 0xff) == 0x6){
			//双字节  110xxxxx 10xxxxxx
			codes.push(s.charCodeAt(++i));
			bytes = [];
			bytes.push(codes[0] & 0x1f);
			bytes.push(codes[1] & 0x3f);
			ret.push(String.fromCharCode((bytes[0] << 6) | bytes[1]));
		}else if(((codes[0] >> 4) & 0xff) == 0xe){
			//三字节  1110xxxx 10xxxxxx 10xxxxxx
			codes.push(s.charCodeAt(++i));
			codes.push(s.charCodeAt(++i));
			bytes = [];
			bytes.push((codes[0] << 4) | ((codes[1] >> 2) & 0xf));
			bytes.push(((codes[1] & 0x3) << 6) | (codes[2] & 0x3f));			
			ret.push(String.fromCharCode((bytes[0] << 8) | bytes[1]));
		}
	}
	return ret.join('');
}
//UTF-8转GBK
function utf8ToGbk(s){
	if(!s){
		return;
	}
	$.ajax({ 
    url: "charset.php", 
    async: false,
    data:{
      charset:'GBK',
      data:s
    },
    success: function(data, textStatus){
      s=data;
    }
  });
	return s;
}
function gbkToUtf8(s){
	if(!s){
		return;
	}
	$.ajax({ 
    url: "charset.php", 
    async: false,
    data:{
      charset:'UTF-8',
      data:s
    },
    success: function(data, textStatus){
      s=data;
    }
  });
	return s;
}

/*
CryptoJS supports the following modes

    CBC (the default)
    CFB
    CTR
    OFB
    ECB
And CryptoJS supports the following padding schemes:

    Pkcs7 (the default)
    Iso97971
    AnsiX923
    Iso10126
    ZeroPadding
    NoPadding

*/
function Padding(padding){
  if (padding == 'NoPadding'){
    return CryptoJS.pad.NoPadding
  }else if(padding == 'ZeroPadding'){
    return CryptoJS.pad.ZeroPadding
  }else{
    return CryptoJS.pad.Pkcs7
  }
}
//DES 解密 加密
function encryptByDES(message, key, padding) {
  if(!arguments[2]) padding = 'NoPadding';
  var key = CryptoJS.enc.Hex.parse(key);
  var message = CryptoJS.enc.Hex.parse(message);
  var padding = Padding(padding);
  var encrypted = CryptoJS.DES.encrypt(message, key, {
    mode: CryptoJS.mode.ECB,
    padding: padding
  });
  return encrypted.toString();
}
//DES 解密
function decryptByDES(ciphertext, key, padding) {
  if(!arguments[2]) padding = 'NoPadding';
  var key = CryptoJS.enc.Hex.parse(key);
  var padding = Padding(padding);
  var decrypted = CryptoJS.DES.decrypt({
    ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
  }, key,{
    mode: CryptoJS.mode.ECB,
    padding: padding
  });
  return decrypted.toString(CryptoJS.enc.Hex);
}

var des_en = function (){
  plaintext = $('#plaintext').val();
  key = $('#key').val();
  plaintext_type = $('input[name="plaintext_types"]:checked').val();
  key_type = $('input[name="key_types"]:checked').val();
  ciphertext_type = $('input[name="ciphertext_types"]:checked').val();
  padding = $('input[name="paddings"]:checked').val();
  try{
    if (plaintext_type == 'ANSII'){
      try{
        plaintext = CryptoJS.enc.Utf8.parse(plaintext).toString(CryptoJS.enc.Hex);
      }catch(err){
        console.log('plaintext:'+err);
        plaintext = CryptoJS.enc.Latin1.parse(plaintext).toString(CryptoJS.enc.Hex);
      }
      if ($('#charset').val() == 'GBK')plaintext = utf8ToGbk(plaintext);
    }else if(plaintext_type == 'HEX'){
      //plaintext = CryptoJS.enc.Hex.parse(plaintext).toString(CryptoJS.enc.Latin1)
    }else if(plaintext_type == 'BASE64'){
      plaintext = CryptoJS.enc.Base64.parse(plaintext).toString(CryptoJS.enc.Hex)
    }else if(plaintext_type == 'URL'){
      plaintext = unescape(plaintext);
      plaintext = CryptoJS.enc.Latin1.parse(plaintext).toString(CryptoJS.enc.Hex)
    }
  }catch(err){
    alert('明文编码异常.' + err);
  }
  try{
    if (key_type == 'ANSII'){
      try{
        key = CryptoJS.enc.Utf8.parse(key).toString(CryptoJS.enc.Hex);
      }catch(err){
        console.log('des_en key:'+err);
        key = CryptoJS.enc.Latin1.parse(key).toString(CryptoJS.enc.Hex);
      }
    }else if(key_type == 'HEX'){
          }else if(key_type == 'BASE64'){
      key = CryptoJS.enc.Base64.parse(key).toString(CryptoJS.enc.Hex);
    }else if(key_type == 'URL'){
      key = unescape(key);
      key = CryptoJS.enc.Latin1.parse(key).toString(CryptoJS.enc.Hex);
    }
  }catch(err){
    alert('密钥编码异常!' + err);
  }
  //alert(plaintext);
  try{
    ciphertext = encryptByDES(plaintext, key, padding);
  }catch(err){
    alert('加密异常!' + err);
  }
  try{
    if (ciphertext_type == 'ANSII'){
      try{
        ciphertext = CryptoJS.enc.Base64.parse(ciphertext).toString(CryptoJS.enc.Utf8);
      }catch(err){
        console.log('des_en ciphertext:'+err);
        ciphertext = CryptoJS.enc.Base64.parse(ciphertext).toString(CryptoJS.enc.Latin1);
      }
    }else if(ciphertext_type == 'HEX'){
      ciphertext = CryptoJS.enc.Base64.parse(ciphertext).toString(CryptoJS.enc.Hex);
    }else if(ciphertext_type == 'BASE64'){
    }else if(ciphertext_type == 'URL'){
      ciphertext = CryptoJS.enc.Base64.parse(ciphertext).toString(CryptoJS.enc.Latin1);
      ciphertext = escape(ciphertext);
    }
  }catch(err){
    alert('密文编码异常!' + err);
  }
  $('#ciphertext').val(ciphertext);
};
var des_de = function (){
  plaintext = $('#plaintext').val();
  ciphertext = $('#ciphertext').val();
  key = $('#key').val();
  plaintext_type = $('input[name="plaintext_types"]:checked').val();
  key_type = $('input[name="key_types"]:checked').val();
  ciphertext_type = $('input[name="ciphertext_types"]:checked').val();
  padding = $('input[name="paddings"]:checked').val();
  try{
    if (ciphertext_type == 'ANSII'){
      try{
        ciphertext = CryptoJS.enc.Utf8.parse(ciphertext).toString(CryptoJS.enc.Base64);
      }catch(err){
        console.log('des_de ciphertext:'+err);
        ciphertext = CryptoJS.enc.Latin1.parse(ciphertext).toString(CryptoJS.enc.Base64);
      }
    }else if(ciphertext_type == 'HEX'){
      ciphertext = CryptoJS.enc.Hex.parse(ciphertext).toString(CryptoJS.enc.Base64);
    }else if(ciphertext_type == 'BASE64'){
    }else if(ciphertext_type == 'URL'){
      ciphertext = unescape(ciphertext);
      ciphertext = CryptoJS.enc.Latin1.parse(ciphertext).toString(CryptoJS.enc.Base64);
    }
  }catch(err){
    alert('密文编码异常!' + err);
  }
  //alert(ciphertext);
  try{
    if (key_type == 'ANSII'){
      try{
        key = CryptoJS.enc.Utf8.parse(key).toString(CryptoJS.enc.Hex);
      }catch(err){
        console.log('des_de key:'+err);
        key = CryptoJS.enc.Latin1.parse(key).toString(CryptoJS.enc.Hex);
      }
    }else if(key_type == 'HEX'){
    }else if(key_type == 'BASE64'){
      key = CryptoJS.enc.Base64.parse(key).toString(CryptoJS.enc.Hex);
    }else if(key_type == 'URL'){
      key = unescape(key);
      key = CryptoJS.enc.Latin1.parse(key).toString(CryptoJS.enc.Hex);
    }
  }catch(err){
    alert('密钥编码异常!' + err);
  }
  //alert(ciphertext);
  try{
    plaintext = decryptByDES(ciphertext, key, padding);
  }catch(err){
    alert('解密异常!ciphertext=[' + ciphertext + ']key=[' + key + ']padding=[' + padding + ']'  + err);
  }
  //alert('解密异常!ciphertext=[' + ciphertext + ']key=[' + key + ']padding=[' + padding + ']' );
  try{
    if (plaintext_type == 'ANSII'){
      if ($('#charset').val() == 'GBK')plaintext = gbkToUtf8(plaintext);
      try{
        plaintext = CryptoJS.enc.Hex.parse(plaintext).toString(CryptoJS.enc.Utf8);
      }catch(err){
        console.log('des_de plaintext:'+err);
        plaintext = CryptoJS.enc.Hex.parse(plaintext).toString(CryptoJS.enc.Latin1);
      }
    }else if(plaintext_type == 'HEX'){
      //plaintext = CryptoJS.enc.Latin1.parse(plaintext).toString(CryptoJS.enc.Hex);
    }else if(plaintext_type == 'BASE64'){
       plaintext = CryptoJS.enc.Hex.parse(plaintext).toString(CryptoJS.enc.Base64);
    }else if(plaintext_type == 'URL'){
      plaintext = CryptoJS.enc.Hex.parse(plaintext).toString(CryptoJS.enc.Latin1);
      plaintext = escape(plaintext);
    }
  }catch(err){
    alert('明文编码异常!' + err);
  } 
  $('#plaintext').val(plaintext);
};

var handleRadio = function (){
  var radioArr = new Array();
  $(":radio").each(function (){
    radioName = $(this).attr('name');
    radioArr[radioName] = $('input[name="'+radioName+'"]:checked').val();
    console.log(radioName+'='+radioArr[radioName]);
  });
  
  $(":radio").change(function (){
    radioName = $(this).attr('name');
    //alert(radioName);
    index = radioName.indexOf('_type');
    if (index == -1){
      return false;
    }
    textName = radioName.substr(0, index);
    console.log(radioName+','+textName);
    type = radioArr[radioName];
    value = $('#'+textName).val();
    
    try{
      if (type == 'ANSII'){
        console.log('ANSII:'+value);
        try{
          value = CryptoJS.enc.Utf8.parse(value).toString(CryptoJS.enc.Hex);
        }catch(err){
          console.log('handleRadio :'+err);
          value = CryptoJS.enc.Latin1.parse(value).toString(CryptoJS.enc.Hex);
        }
        if ($('#charset').val() == 'GBK')value = utf8ToGbk(value);
        console.log('GBK,Hex:'+value);
      }else if(type == 'HEX'){
        
      }else if(type == 'BASE64'){
         value = CryptoJS.enc.Base64.parse(value).toString(CryptoJS.enc.Hex);
      }else if(type == 'URL'){
        value = unescape(value);
        value = CryptoJS.enc.Latin1.parse(value).toString(CryptoJS.enc.Hex);
      }
      new_type = $('input[name="'+radioName+'"]:checked').val();
      
      if (new_type == 'ANSII'){
        console.log('GBK,Hex:'+value);
        if ($('#charset').val() == 'GBK')value = gbkToUtf8(value);
        console.log('UTF-8,Hex:'+value);
        try{
          value = CryptoJS.enc.Hex.parse(value).toString(CryptoJS.enc.Utf8);
        }catch(err){
          console.log('handleRadio:'+value);
          value = CryptoJS.enc.Hex.parse(value).toString(CryptoJS.enc.Latin1);
        }
        console.log('Utf8:'+value);
        
      }else if(new_type == 'HEX'){
        
      }else if(new_type == 'BASE64'){
         value = CryptoJS.enc.Hex.parse(value).toString(CryptoJS.enc.Base64);
      }else if(new_type == 'URL'){
        value = CryptoJS.enc.Hex.parse(value).toString(CryptoJS.enc.Latin1);
        value = escape(value);
      }
      $('#'+textName).val(value);
      radioArr[radioName] = new_type;
    }catch(err){
      //alert('明文编码异常!' + err);
      console.log('异常:'+ err);
    } 
    
  });
};
$(document).ready(function(){
  $('#btn_en').click(function(){
      des_en();
  });
  $('#btn_de').click(function(){
      des_de();
  });
  handleRadio();
  
});
</script>
</body>
</html>
